import React, { useState, useEffect } from 'react'
import PubSub from 'pubsub-js'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import Item from './components/Item/Item'
import './App.css'
export default function App() {
  // const [todos, setTodos] = useState(
  //   JSON.parse(localStorage.getItem('todos')) || []
  // )
  const [todos, setTodos] = useState([
    { id: 1, todoName: '123123124234235', isDone: true },
  ])
  // 第二个参数空数组,则外层函数只模拟挂载,内部模拟卸载
  useEffect(() => {
    const addId = PubSub.subscribe('addTodo', (topic, todoName) => {
      // // 根据任务名,创建任务对象
      // const obj = {
      //   todoName,
      //   isDone: false,
      //   // 要求: 1. 必须是整数, 2. 不能重复
      //   // 判断todos中是否有数据,有数据就找到最后的任务对象的id+1.没有数据就直接赋值为1
      //   id: todos.length ? todos[todos.length - 1].id + 1 : 1,
      // }
      // //注意: useState内部自动实现了性能优化,如果状态数据没有发生变化,则不更新组件
      // // 如何判断数据是否变化: 1. 基本数据类型比值, 2. 复杂数据类型比地址值
      // // todos.push(obj) // 直接修改了数据,组件不会更新,并且数组的地址也没有变化
      // // 根据旧数据,创建新数组
      // const newTodos = [...todos]
      // newTodos.push(obj)
      // setTodos(newTodos) //让组件更新.

      setTodos((todos) => {
        // console.log(todos)
        // 根据任务名,创建任务对象
        const obj = {
          todoName,
          isDone: false,
          // 要求: 1. 必须是整数, 2. 不能重复
          // 判断todos中是否有数据,有数据就找到最后的任务对象的id+1.没有数据就直接赋值为1
          id: todos.length ? todos[todos.length - 1].id + 1 : 1,
        }
        //注意: useState内部自动实现了性能优化,如果状态数据没有发生变化,则不更新组件
        // 如何判断数据是否变化: 1. 基本数据类型比值, 2. 复杂数据类型比地址值
        // todos.push(obj) // 直接修改了数据,组件不会更新,并且数组的地址也没有变化
        // 根据旧数据,创建新数组
        const newTodos = [...todos]
        newTodos.push(obj)
        return newTodos
      })
    })
    return () => {
      PubSub.unsubscribe(addId)
    }
  }, [])
  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header></Header>
        <div>
          <List>
            {todos.map((item) => {
              return <Item key={item.id} todo={item}></Item>
            })}
          </List>
          <Footer></Footer>
        </div>
      </div>
    </div>
  )
}
